<script>
    let reportComponent = {
        template: `
<div style="background: rgb(245, 246, 250);">

       <div style="width: 100%;height: 50px;background-color: #FFF;display: flex;align-items: center;padding-left: 20px">
            <el-select  placeholder="项目" size="medium" style="width: 300px" clearable filterable default-first-option v-model="project_id"  @change="selectDisposeCode">
            <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
            </el-option>
            </el-select>
                <el-date-picker type="datetimerange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="selectedYearRecord" @change="changeRangeDate"  style="width: 300px;height: 40px;margin-left: 30px">

                </el-date-picker>
        </div>

       <div style="margin: 20px">

       <div style="display: flex">
        <div style="flex: 2;background-color: #FFF;padding: 10px;">
            <div style="display: flex;align-items: center;justify-content: space-between">
                <div style="color: #333;font-weight: bold">年度项目收支及利润</div>

              </div>

              <div style="display: flex;align-items: center;margin-top: 10px;">
                    <div style="background-color: red;flex: 1;text-align: center;padding-top: 25px;border-radius: 8px;height: 75px;vertical-align: center">
                        <div style="color: #FFFFFF;font-size: 20px">￥{{countDebt.in_format}}</div>
                        <div style="color: #FFF;font-size: 14px">本年收入</div>
                    </div>
                    <div style="width: 20px"></div>
                    <div style="background-color: lightgreen;flex: 1;text-align: center;padding-top: 25px;border-radius: 8px;height: 75px;">
                        <div style="color: #FFFFFF;font-size: 20px">￥{{countDebt.out_format}}</div>
                        <div style="color: #FFF;font-size: 14px">本年支出</div>
                    </div>
                    <div style="width: 20px"></div>
                    <div style="background-color: lightblue;flex: 1;text-align: center;padding-top: 25px;border-radius: 8px;height: 75px;">
                        <div style="color: #FFFFFF;font-size: 20px">￥{{countDebt.debt_format}}</div>
                        <div style="color: #FFF;font-size: 14px">本年利润</div>
                    </div>
              </div>


             <div style="display: flex;margin-top: 40px">
                <div style="color: #333;font-weight: bold">财务收支情况</div>
              </div>
             <div style="height: 10px"></div>
             <div id="statMonthy" class="statBox"></div>
        </div>
        <div style="width: 10px"></div>
        <div style="flex: 3;">
            <div style="background-color: #FFF;padding: 10px;display: flex">
                <div style="flex: 1;">
                    <div style="color: #333;font-weight: bold">项目收入(分类)</div>

                    <div id="statMemberOut" class="statBox"></div>
                </div>

                <div style="flex: 1;">
                    <el-table class="statTable"
                    :data="recvordShou" >
                    <el-table-column
                    prop="name"
                    label="账单日期">
                        <template slot-scope="scope">
                        <p><i class="el-icon-time"></i>
                            <span>{{ scope.row.tally_time.substring(0,10) }}</span>
                        </p>
                        </template>

                    </el-table-column>
                    <el-table-column
                    prop="total"
                    label="二级分类" sortable>
                     <template slot-scope="scope">
                        <p><i class="el-icon-time"></i>
                            <span>{{ scope.row.category_ppid == 0 ? scope.row.category_pname : scope.row.category_ppname }}</span>
                        </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="account_name"
                    label="账户" sortable>
                    </el-table-column>

                    <el-table-column
                    prop="amount"
                    label="账户">
                    </el-table-column>

                    <el-table-column
                    prop="store_name"
                    label="客户/供应商" sortable>
                    </el-table-column>
                    </el-table>

                    <p style="margin-top: 10px;text-align: center">
                        <el-pagination
                        :current-page="currentPageShouRu"
                        background
                        layout="prev, pager, next, total"
                        :page-size="recvordShouPage.pageSize"
                        :total="recvordShouPage.totalCount"
                        @current-change="handleRecordPageChange"
                        >
                        </el-pagination>
                    </p>
                </div>
            </div>
            <div style="height: 20px"></div>
            <div style="width: 1200px;background-color: #FFF;padding: 10px;display: flex">
                <div style="flex: 1;">
                    <div style="color: #333;font-weight: bold">项目支出(分类)</div>

                    <div id="statMemberIn" class="statBox"></div>

                </div>

                <div style="flex: 1;">
                    <el-table class="statTable"
                    :data="recvordZhi" >
                    <el-table-column
                    prop="name"
                    label="账单日期">
                        <template slot-scope="scope">
                        <p><i class="el-icon-time"></i>
                            <span>{{ scope.row.tally_time.substring(0,10) }}</span>
                        </p>
                        </template>

                    </el-table-column>
                    <el-table-column
                    prop="total"
                    label="二级分类" sortable>
                     <template slot-scope="scope">
                        <p><i class="el-icon-time"></i>
                            <span>{{ scope.row.category_ppid == 0 ? scope.row.category_pname : scope.row.category_ppname }}</span>
                        </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="account_name"
                    label="账户" sortable>
                    </el-table-column>

                    <el-table-column
                    prop="amount"
                    label="账户">
                    </el-table-column>

                    <el-table-column
                    prop="store_name"
                    label="客户/供应商" sortable>
                    </el-table-column>
                    </el-table>

                    <p style="margin-top: 10px;text-align: center">
                        <el-pagination
                        :current-page="currentPageZhichu"
                        background
                        layout="prev, pager, next, total"
                        :page-size="recvordZhiPage.pageSize"
                        :total="recvordZhiPage.totalCount"
                        @current-change="handleRecordZhiPageChange"
                        >
                        </el-pagination>
                    </p>
                </div>
            </div>
        </div>
</div>



         <div style="background-color: #FFF;margin-top: 10px;padding: 10px">
             <div style="display: flex;">
                <div style="flex: 2;display: flex;justify-content: space-between">
                   <div style="color: #333;font-weight: bold">项目预收/付情况</div>

                </div>
                <div style="flex: 3;display: flex">
                    <div style="flex: 1"></div>
                    <el-select placeholder="客户/供应商" clearable filterable  v-model="store_id_future"  @change="changeStore">
                    <el-option
                        v-for="item in storeList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        </el-option>
                        </el-select>
                </div>
            </div>

        <div style="display: flex">
            <div style="flex: 3">
                <div id="statYu" class="statBox"></div>
            </div>
            <div style="flex: 3">
                    <el-table class="statTable"
                    :data="recvordFuture" >
                    <el-table-column
                    prop="name"
                    label="账单日期">
                        <template slot-scope="scope">
                        <p><i class="el-icon-time"></i>
                        <span>{{ scope.row.tally_time.substring(0,10) }}   {{ scope.row.type_txt}} -{{ scope.row.category_name.substring(0,4)}}...</span>
                        </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="amount"
                    label="账户">
                    </el-table-column>

                    <el-table-column
                    prop="amount_remain"
                    label="未核销">
                    </el-table-column>

                    <el-table-column
                    prop="store_name"
                    label="客户/供应商" sortable>
                    </el-table-column>
                    </el-table>

                    <p style="margin-top: 10px;text-align: center">
                        <el-pagination
                        :current-page="currentPageFuture"
                        background
                        layout="prev, pager, next, total"
                        :page-size="recvordFuturePage.pageSize"
                        :total="recvordFuturePage.totalCount"
                        @current-change="handleRecordPageChangeFuture"
                        >
                        </el-pagination>
                    </p>
            </div>

        </div>

        </div>

               <div style="background-color: #FFF;margin-top: 10px;padding: 10px">
             <div style="display: flex;">
                <div style="flex: 2">
                   <div style="color: #333;font-weight: bold">项目挂账情况</div>
                </div>
                <div style="flex: 3;display: flex">
                    <div style="flex: 1"></div>
                     <el-select placeholder="客户/供应商" clearable filterable  v-model="store_id_gua"  @change="changeStoreGua">
                        <el-option
                        v-for="item in storeList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        </el-option>
                        </el-select>
                </div>
            </div>

        <div style="display: flex">
            <div style="flex: 3">
                <div id="statGua" class="statBox"></div>
            </div>
            <div style="flex: 3">
                <el-table class="statTable"
                    :data="recvordGua" >
                    <el-table-column
                    prop="name"
                    label="账单日期">
                        <template slot-scope="scope">
                        <p><i class="el-icon-time"></i>
                        <span>{{ scope.row.tally_time.substring(0,10) }}   {{ scope.row.type_txt}} -{{ scope.row.category_name }}</span>
                        </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="amount"
                    label="账户">
                    </el-table-column>

                    <el-table-column
                    prop="amount_remain"
                    label="未核销">
                    </el-table-column>

                    <el-table-column
                    prop="store_name"
                    label="客户/供应商" sortable>
                    </el-table-column>
                    </el-table>

                    <p style="margin-top: 10px;text-align: center">
                        <el-pagination
                        :current-page="currentPageGua"
                        background
                        layout="prev, pager, next, total"
                        :page-size="recvordGuaPage.pageSize"
                        :total="recvordGuaPage.totalCount"
                        @current-change="handleRecordPageChangeGua"
                        >
                        </el-pagination>
                    </p>
            </div>
        </div>

        </div>


        </div>



</div>
    `,
        computed: {
            customList () {
                return this.$store.state.customList
            },
            gysList () {
                return this.$store.state.gysList
            },
            storeList() {
                return this.gysList.concat(this.customList)
            },
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            projectList() {
                this.project_id = this.$store.state.projectList[0]['id'];
                return this.$store.state.projectList
            }

        },
        data:function(){
            return {
                countDebt:{
                    'in_format':'0.00',
                    'out_format':'0.00',
                    'debt_format':'0.00'
                },
                selectedYearRecord:null,
                selectedYearValue:null,
                statMonthForm:{},
                statMemberForm:{
                    begin_date : '',
                    end_date : '',
                },
                recvordShou:[],
                recvordShouPage:{
                    pageSize:10,
                    totalCount:0,
                },
                recvordZhi:[],
                recvordZhiPage:{
                    pageSize:10,
                    totalCount:0,
                },
                store_id_future:null,
                store_id_gua:null,
                recvordGua:[],
                recvordGuaPage:{
                    pageSize:10,
                    totalCount:0,
                },
                recvordFuture:[],
                start_date:'',
                end_date:'',
                recvordFuturePage:{
                    pageSize:10,
                    totalCount:0,
                },
                currentPageShouRu:1,
                currentPageZhichu:1,
                currentPageGua:1,
                currentPageFuture:1,
                statMemberInData:[],
                statMemberOutData:[],
                project_id:0,
            }
        },
        mounted(){
            this.setMonthyGraph();
            this.setMemberGraph();
            this.getCountDebt()
            this.setGuaDebt()
            this.setFutureDebt()
            this.getRecord()
            this.getGuaRecord()
            this.getFutureRecord()
            this.getRecordZhi()
        },
        methods:{
            changeStore(value){
                this.handleRecordPageChangeFuture(1)
                this.setFutureDebt()
            },
            changeStoreGua(value){
                this.setGuaDebt()
                this.handleRecordPageChangeGua(1)
            },
            changeYear(value){
                if(value != null){
                    this.selectedYearValue = value.getFullYear();
                }else{
                    this.selectedYearValue = null;
                }
                this.getCountDebt()
                this.setFutureDebt()

                //获取收支等等
            },

            changeRangeDate(value){
                if(value != null){
                    this.begin_date = value[0];
                    this.end_date = value[1];
                }else{
                    this.begin_date = ''
                    this.end_date = ''
                }
                this.getCountDebt()
                this.handleRecordPageChange(1)
                this.handleRecordZhiPageChange(1)
                this.setMemberGraph()
                this.handleRecordPageChangeGua(1)
                this.handleRecordPageChangeFuture(1)
            },


            handleRecordPageChange(currentPage){
                this.currentPageShouRu = currentPage
                this.getRecord()
            },
            handleRecordZhiPageChange(currentPage){
                this.currentPageShouRu = currentPage
                this.getRecordZhi()
            },
            handleRecordPageChangeFuture(currentPage){
                this.currentPageFuture = currentPage
                this.getFutureRecord()

            },
            handleRecordPageChangeGua(currentPage){
                this.currentPageGua = currentPage
                this.getGuaRecord()
            },
            //更换项目
            selectDisposeCode(){
                this.setMonthyGraph();
                this.setMemberGraph();
                this.getCountDebt()
                this.setGuaDebt()
                this.setFutureDebt()
                this.getRecord()
                this.getRecordZhi()
                this.getGuaRecord()
                this.getFutureRecord()
                this.$forceUpdate()
            },
            //获取流水
            getRecord(){
                let page = this.currentPageShouRu;

                let that = this
                axios.get('/api/tally-record/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {
                        page:page,
                        tally_id:that.currentTallyId,
                        project_id:that.project_id,
                        page_limie:5,
                        type:10,
                        begin_date:this.begin_date,
                        end_date:this.end_date
                    }
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.recvordShou = res.data.data.data
                        that.recvordShouPage = res.data.data.pageInfo
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },

            getRecordZhi(){
                let that = this
                axios.get('/api/tally-record/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {
                        page:this.currentPageShouRu,
                        tally_id:that.currentTallyId,
                        project_id:that.project_id,
                        page_limie:5,
                        type:20,
                        begin_date:this.begin_date,
                        end_date:this.end_date
                    }
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.recvordZhi = res.data.data.data
                        that.recvordZhiPage = res.data.data.pageInfo
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            //获取挂账的列表
            getGuaRecord(){
                let that = this
                axios.get('/api/tally-arap/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params:{
                        tally_id:that.currentTallyId,
                        project_id:that.project_id,
                        page:that.currentPageGua,
                        page_limie:5,
                        begin_date:this.begin_date,
                        end_date:this.end_date,
                        store_id:this.store_id_gua == null ? '' : this.store_id_gua
                    },
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.recvordGua = res.data.data.data
                        that.recvordGuaPage = res.data.data.pageInfo
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            getFutureRecord(){
                let that = this
                axios.get('/api/tally-future/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params:{
                        tally_id:that.currentTallyId,
                        project_id:that.project_id,
                        page:that.currentPageFuture,
                        page_limie:5,
                        begin_date:this.begin_date,
                        end_date:this.end_date,
                        store_id:this.store_id_future == null ? '' : this.store_id_future
                    },
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.recvordFuture = res.data.data.data
                        that.recvordFuturePage = res.data.data.pageInfo
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            //获取汇总数据
            getCountDebt(){
                let begin_date = '';
                let end_date = '';
                //默认本年

                let that = this
                axios.get('/api/tally-record/count-debt',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {
                        project_id:this.project_id,
                        tally_id:this.currentTallyId,
                        begin_date:this.begin_date,
                        end_date:this.end_date
                    }
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.countDebt = res.data.data
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },



            setMonthyGraph(){
                let that = this
                this.statMonthForm['project_id'] = that.project_id;
                axios.post('/api/stat/monthy?tally_id='+that.currentTallyId,this.statMonthForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        let monthyCates = [] ;
                        let monthyInChartData = [] ;
                        let monthyOutChartData = [] ;
                        let monthyProChartData = [] ;
                        // 表格展示 收入
                        res.data.data.forEach(v=>{
                            monthyCates.push(v.date);
                            monthyInChartData.push(v.data.in);
                            monthyOutChartData.push(v.data.out);
                        });
                        let statMonthyData = {
                            dataCategory: monthyCates,
                            datas: [{
                                name: '收入',
                                data: monthyInChartData
                            }, {
                                name: '支出',
                                data: monthyOutChartData
                            }
                            ]
                        };
                        // 渲染统计图表
                        // console.log(that.monthChartType)
                        renderMonthy('statMonthy',statMonthyData,'line')
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            setMemberGraph(){
                let that = this
                that.statMemberInData=[]
                that.statMemberOutData=[]

                axios.post('/api/stat/catrgory-in?tally_id='+that.currentTallyId,{
                    project_id:that.project_id,
                    begin_date:this.begin_date,
                    end_date:this.end_date
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){

                        // 表格展示 收入 支出
                        // that.statMemberInData = res.data.data.inlst
                        // that.statMemberOutData = res.data.data.outlist
                        // 渲染统计图表
                        genMemberGraphFromData(res.data.data)
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            setGuaDebt(){
                let that = this
                axios.post('/api/stat/gua-count-debt?tally_id='+that.currentTallyId,{
                    project_id:that.project_id,
                    begin_date:this.begin_date,
                    end_date:this.end_date,
                    store_id:this.store_id_gua == null ? '' : this.store_id_gua
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){

                        genGuaData(res.data.data)
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            setFutureDebt(){
                let that = this
                axios.post('/api/stat/yu-shou-count-debt?tally_id='+that.currentTallyId,{
                    project_id:that.project_id,
                    begin_date:this.begin_date,
                    end_date:this.end_date,
                    store_id:this.store_id_future == null ? '' : this.store_id_future
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){

                        genYuData(res.data.data)
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            }
        },


    }
</script>